{% extends "base.html" %}

{% block title %}客户管理 - {% if followup %}编辑跟进记录{% else %}添加跟进记录{% endif %}{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.list_customers') }}" class="text-gray-500 hover:text-gray-700">客户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('customer.customer_detail', customer_id=customer.id) }}" class="text-gray-500 hover:text-gray-700">{{ customer.name }}</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">{% if followup %}编辑跟进记录{% else %}添加跟进记录{% endif %}</li>
        </ol>
    </nav>

    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <form method="post" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="grid grid-cols-1 gap-6">
                    <!-- 基本信息 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="method" class="block text-sm font-medium text-gray-700">跟进方式 <span class="text-red-500">*</span></label>
                                <select name="method" id="method" required
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                                    <option value="">请选择跟进方式</option>
                                    <option value="电话" {% if followup and followup.method == '电话' %}selected{% endif %}>电话</option>
                                    <option value="邮件" {% if followup and followup.method == '邮件' %}selected{% endif %}>邮件</option>
                                    <option value="微信" {% if followup and followup.method == '微信' %}selected{% endif %}>微信</option>
                                    <option value="上门拜访" {% if followup and followup.method == '上门拜访' %}selected{% endif %}>上门拜访</option>
                                    <option value="会议" {% if followup and followup.method == '会议' %}selected{% endif %}>会议</option>
                                    <option value="其他" {% if followup and followup.method == '其他' %}selected{% endif %}>其他</option>
                                </select>
                            </div>
                            <div>
                                <label for="next_time" class="block text-sm font-medium text-gray-700">下次跟进时间</label>
                                <input type="datetime-local" name="next_time" id="next_time"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"
                                    value="{{ followup.next_followup_time.strftime('%Y-%m-%dT%H:%M') if followup and followup.next_followup_time else '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- 跟进内容 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">跟进内容</h3>
                        <div>
                            <label for="content" class="block text-sm font-medium text-gray-700">跟进内容 <span class="text-red-500">*</span></label>
                            <textarea name="content" id="content" rows="6" required
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">{{ followup.content if followup else '' }}</textarea>
                        </div>
                    </div>

                    <!-- 跟进结果 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">跟进结果</h3>
                        <div>
                            <label for="result" class="block text-sm font-medium text-gray-700">跟进结果</label>
                            <textarea name="result" id="result" rows="4"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">{{ followup.result if followup else '' }}</textarea>
                        </div>
                    </div>

                    <!-- 附件上传 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">附件上传</h3>
                        <div>
                            <label for="attachment" class="block text-sm font-medium text-gray-700">选择图片</label>
                            <input type="file" name="attachment" id="attachment" accept="image/*"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                            {% if followup and followup.attachment %}
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">当前附件：</p>
                                <img src="{{ url_for('static', filename='uploads/' + followup.attachment) }}" alt="附件" class="mt-1 h-32 w-auto object-contain border border-gray-300 rounded-md">
                                <div class="mt-2">
                                    <label class="inline-flex items-center">
                                        <input type="checkbox" name="remove_attachment" value="1" class="rounded border-gray-300 text-primary focus:ring-primary">
                                        <span class="ml-2 text-sm text-gray-700">删除当前附件</span>
                                    </label>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- 客户状态更新 -->
                    <div>
                        <h3 class="text-lg font-medium text-gray-900 mb-4">客户状态更新</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="update_type" class="block text-sm font-medium text-gray-700">客户类型</label>
                                <select name="update_type" id="update_type"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                                    <option value="">不更新</option>
                                    <option value="潜在客户" {% if customer.type == '潜在客户' %}selected{% endif %}>潜在客户</option>
                                    <option value="意向客户" {% if customer.type == '意向客户' %}selected{% endif %}>意向客户</option>
                                    <option value="成交客户" {% if customer.type == '成交客户' %}selected{% endif %}>成交客户</option>
                                    <option value="流失客户" {% if customer.type == '流失客户' %}selected{% endif %}>流失客户</option>
                                </select>
                            </div>
                            <div>
                                <label for="update_status" class="block text-sm font-medium text-gray-700">客户状态</label>
                                <select name="update_status" id="update_status"
                                    class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
                                    <option value="">不更新</option>
                                    <option value="活跃" {% if customer.status == '活跃' %}selected{% endif %}>活跃</option>
                                    <option value="休眠" {% if customer.status == '休眠' %}selected{% endif %}>休眠</option>
                                    <option value="流失" {% if customer.status == '流失' %}selected{% endif %}>流失</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end space-x-3">
                    <a href="{{ url_for('customer.customer_detail', customer_id=customer.id) }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        取消
                    </a>
                    <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        {% if followup %}保存修改{% else %}添加跟进记录{% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}